<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<c:set var="path" value="${pageContext.request.contextPath}" />
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta charset="utf-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="${path }/static/css/allclothes.css">
</head>
<script type="text/javascript">
	var msg = '${msg}'
	if (msg == null || msg == "") {
		
	}else{
		alert(msg);
	}
</script>
<body>
<input type="hidden" value="${list }"/>
<c:forEach items="${list }" var="list">
<div class="hd"></div>
<form method="get" action="${path }/DoSelectServlet">
<input type="hidden" value="${list.userid }" name="userid"/>

<div class=" Search">
<input id="searchInput" class="search-input" type="text" placeholder="搜索其他喜欢的衣服" name="SelectText">
<input type="submit" value="搜索" class="search-btn btn">
</div>
</form>

<div id="main">
	<div class="demo">
	<c:forEach items="${lc }" var="lc">
	<div class="box">
		<a href="${path }/ToShowCommodity?userid=${list.userid }&comid=${lc.comid }">
			<img src="static/images/${lc.image }.jpg" width="250" height="300"/>
			<h4>¥<span>${lc.price}</span></h4>
			<p>${lc.com_name}</p>
			</a>
			<a href="${path }/DoAddShoppingCart?comid=${lc.comid }&userid=${list.userid }" class="button orange addcar">加入购物车</a>
		</div>
		</c:forEach>
	<div class="m-sidebar">
		<div class="me">
			<i id="end"></i>
			<a href="${path }/ToMe?userid=${list.userid }"><span class="carstext">个人中心</span></a>
		</div>
		<div class="cart">
			<i id="end"></i>
			<a href="${path }/ToShoppingCart?userid=${list.userid }"><span class="carstext">购物车</span></a>
		</div>
		<div class="scj">
			<i id="end"></i>
			<a href="${path }/ToFavorite?userid=${list.userid }"><span class="carstext">收藏夹</span></a>
		</div>
	</div>
	<div id="msg">已成功加入购物车！</div>
</div>
<div style="text-align:center;clear:both;"><br><br><br><br><br><br><br>
</div>
</div>
</c:forEach>

</body>
<script type="text/javascript" src="${path }/static/js/jquery.min.js"></script>
<script>
$(function() {
	var offset = $("#end").offset();
	$(".addcar").click(function(event){
		var addcar = $(this);
		var img = addcar.parent().find('img').attr('src');
		var flyer = $('<img class="u-flyer" src="'+img+'">');
		flyer.fly({
			start: {
				left: event.pageX,
				top: event.pageY
			},
			end: {
				left: offset.left+10,
				top: offset.top+10,
				width: 0,
				height: 0
			},
			onEnd: function(){
				$("#msg").show().animate({width: '250px'}, 200).fadeOut(1000);
				addcar.css("cursor","default").removeClass('orange').unbind('click');
				this.destory();
			}
		});
	});
  
});
</script>
</html>
